<template>
  <div :class="{'frame': true, editType: true}">
    <div v-if="editType==='inner'" class="inner">
      <div v-if="title" class="title">{{ title }}</div>
      <slot></slot>
      <div :class="{'frame-footer': true, 'inner-footer': !!title, 'inner-footer-1': !title}">
        <slot name="footer"></slot>
      </div>
    </div>
    <el-dialog v-else v-dialogDrag :title="title" :top="top" :width="width" :visible.sync="isShowDialog" :before-close="onBeforeClose" :close-on-click-modal="!dataOptions.global_editorProhibitCloseOnClickModal" custom-class="frame-editor-dialog" append-to-body @opened="opened">
      <div class="prev-item" @click="changeItem('prev')">
        <i class="el-icon-yrt-arrow-left1"></i>
      </div>
      <div class="next-item" @click="changeItem('next')">
        <i class="el-icon-yrt-youjiantou5"></i>
      </div>
      <slot></slot>
      <div class="frame-footer">
        <slot name="footer"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "yrt-editor-frame",
  props: {
    // 数据参数
    dataOptions: {
      type: Object,
      default: () => {}
    },
    // 编辑类型：inner、dialog
    editType: {
      type: String,
      default: "dialog"
    },
    // 显示对话框
    visible: {
      type: Boolean,
      default: false
    },
    // 对话框宽度
    width: {
      type: String,
      default: null
    },
    // 标题名称
    title: {
      type: String,
      default: null
    },
    // Dialog CSS 中的 margin-top 值
    top: {
      type: String,
      default: null
    },
    // 关闭前事件
    onBeforeClose: {
      type: Function,
      default: done => {
        done();
      }
    }
  },
  data () {
    return {};
  },
  computed: {
    // 是否显示dialog
    isShowDialog: {
      get: function () {
        return this.visible;
      },
      set: function (newValue) {
        this.$emit("update:visible", newValue); // 双向绑定prop.visible，通知父级组件变量值同步更新
      }
    }
  },
  methods: {
    opened () {
      this.$emit("opened");
    },
    changeItem (type) {
      this.$emit("on-change-item", type);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.frame {
  background-color: white;
  padding: 10px;
  padding-bottom: 20px;
  .title {
    padding: 10px;
  }
  &.editType {
    padding: 0px;
  }
  .inner {
    margin-bottom: 70px;
  }
}

.frame-footer {
  margin-top: 20px;
  ::v-deep .dialog-footer {
    overflow: hidden;
    ::v-deep .el-button--medium {
      padding: 10px 10px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
  &.inner-footer {
    z-index: 100;
    position: fixed;
    bottom: 13px;
    right: 13px;
    background-color: white;
  }
  &.inner-footer-1 {
    z-index: 100;
    margin-bottom: 20px;
    margin-right: 20px;
    background-color: white;
  }
}
</style>

<style lang="scss">
.frame-editor-dialog {
  overflow: initial !important;
  position: relative;
  .prev-item {
    position: absolute;
    left: -25px;
    width: 25px;
    height: 50px;
    border: 1px solid #fefefe0a;
    background-color: #ffffff05;
    border-radius: 50px 0 0 50px;
    padding-left: 5px;
    padding-top: 3px;
    cursor: pointer;
    &:hover {
      border: 1px solid #fefefe;
      background-color: #ffffff;
    }
    i {
      font-size: 20px;
      margin-top: 10px;
    }
  }
  .next-item {
    position: absolute;
    right: -25px;
    width: 25px;
    height: 50px;
    border: 1px solid #fefefe0a;
    background-color: #ffffff05;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    padding-top: 5px;
    &:hover {
      border: 1px solid #fefefe;
      background-color: #ffffff;
    }
    i {
      font-size: 17px;
      margin-top: 10px;
    }
  }
}
</style>
